<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/js/datagrid-detailview.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/back/css/bootstrap.min.css">
<table id="tableOrder" class="easyui-datagird"></table>
<script type="text/javascript">
    $(function () {
        $('#ssOrder').searchbox({
            searcher:function(value,name){
                $("#tableOrder").datagrid("load",{
                    "columnName":name,
                    "columnValue":value,
                });
            },
            width:300,
            menu:'#mmOrder',
            prompt:'请输入值',
        });

        $("#tableOrder").datagrid({
            url: "${pageContext.request.contextPath}/back/order/findAll",
            autoRowHeight: true,
            fit:true,
            fitColumns: true,
            toolbar: '#tbOrder',
            columns: [[
                {field: "checkbox", checkbox: true},
                {title: "订单编号", field: "orderid", width: 200,formatter: function (value, row, index) {
                        return row.order.orderid;
                    }},
                {title: "总价格", field: "totalprice", width: 80,formatter: function (value, row, index) {
                        return row.order.totalprice.toFixed(2);
                    }},
                {title: "创建时间", field: "createdate", width: 140,formatter: function (value, row, index) {
                        var date = new Date(row.order.createdate);
                        return date.toLocaleDateString()+"   "+ date.toLocaleTimeString();
                    }},
                {title: "用户名", field: "username", width: 100,formatter: function (value, row, index) {
                        return row.user.nickname;
                    }},
                {title: "收件人", field: "consignee", width: 100,formatter: function (value, row, index) {
                        return row.address.consignee;
                    }},
                {title: "身份证", field: "IDCard", width: 200,formatter: function (value, row, index) {
                        return row.address.idcard;
                    }},
                {title: "手机号", field: "phone", width: 150,formatter: function (value, row, index) {
                        return row.address.phone;
                    }},
                {title: "地区", field: "region", width: 200,formatter: function (value, row, index) {
                        return row.address.region;
                    }},
                {title: "街道", field: "street", width: 200,formatter: function (value, row, index) {
                        return row.address.street;
                    }},
                {title: "邮编", field: "zip", width: 50,formatter: function (value, row, index) {
                        return row.address.zip;
                    }},
                {title: "身份证正面照", field: "frontPath", width: 100,formatter: function (value, row, index) {
                        return "<img style=\"width: 80px;height: 80px;display: inline-block;border-radius:10px; \"  src='${pageContext.request.contextPath}/"+row.address.frontpath+"'/>";
                    }},
        {title: "身份证反面照", field: "backPath", width: 100,formatter: function (value, row, index) {
                return "<img style=\"width: 80px;height: 80px;display: inline-block;border-radius:10px; \"  src='${pageContext.request.contextPath}/"+row.address.backpath+"'/>";
        }},
        {title: "状态", field: "status", width: 70,formatter: function (value, row, index) {
            switch (row.order.status) {
                case 0:
                    return "未支付";
                case 1:
                    return "已支付";
                case 2:
                    return "已发货";
                case 3:
                    return "已签收";
                case 4:
                    return "交易完成";
            }
        }},
        {
            title: "修改状态", field: "options", width: 130, formatter: function (value, row, index) {
                var sel = ["","","","",""];

                sel[row.order.status] = "selected";

                var h = "<select class=\"cc\" name=\""+row.order.id+"\" style=\"width:100px;\" '>   \n" +
                    "    <option value=\"0\" "+sel[0]+">未支付</option>   \n" +
                    "    <option value=\"1\" "+ sel[1] +">已支付</option>   \n" +
                    "    <option value=\"2\" "+sel[2]+">已发货</option>   \n" +
                    "    <option value=\"3\" "+sel[3]+">已签收</option>   \n" +
                    "    <option value=\"4\" "+ sel[4]+">交易完成</option>   \n" +
                    "</select>";
            return h;
        }
        }
    ]],
        pagination: true,
            checkOnSelect: true,
            selectOnCheck: true,
            pageList:[5,10,20,40,80,100],
            pageSize:5,
            view: detailview,
            detailFormatter: function(rowIndex, rowData){

                var html = "";
                console.log(rowData);
                $.each(rowData.orderItemPojos,function (index,item) {
                    html += '<table class="table table-bordered table-striped table-hover">'
                                +'<tr >' +
                                    ' <th>图片</th>' +
                                    ' <th>商品名</th>' +
                                    ' <th>价格</th>' +
                                    ' <th>颜色</th>' +
                                    ' <th>尺寸</th>' +
                                    ' <th>重量</th>' +
                                    ' <th>购买数量</th>' +
                                '</tr>'+
                                '<tr>' +
                                    '<td>' +
                                        '<img src="${pageContext.request.contextPath}' + item.skuPojo.image + '" style="height:50px;">' +
                                    '</td>' +
                                    '<td>' +
                                     item.productPojo.product.name  +
                                    '</td>' +
                                    '<td>' +
                                     item.skuPojo.discount*item.skuPojo.originPrice  +
                                    '</td>' +
                                    '<td>' +
                                     item.skuPojo.color  +
                                    '</td>' +
                                    '<td>' +
                                     item.skuPojo.size  +
                                    '</td>' +
                                    '<td>' +
                                     item.skuPojo.weight  +
                                    '</td>' +
                                    '<td>' +
                                     item.orderItem.count  +
                                    '</td>' +
                                '</tr>' +
                            '</table>';
                });
            return html;
        },
        onLoadSuccess: function () {
            $(".btnOrder").linkbutton();
            $(".cc").combobox({
                onChange:function (newValue,oldValue) {
                    var id = $(this).attr("textboxname")
                    $.messager.confirm('确认对话框', '您确定修改订单状态吗？', function(r){
                        if (r){
                            $.ajax({
                                url:"${pageContext.request.contextPath}/back/order/updateStatus",
                                type:"GET",
                                data:{"id":id,status:newValue},
                                success:function (data) {
                                    $.messager.show({
                                        title:'提示信息',
                                        msg:data.message,
                                        timeout:5000,
                                        showType:'slide'
                                    });
                                    $("#tableOrder").datagrid("reload");

                                }
                            });
                        }
                    });


                }
            });

            /*$(".cc").onchange(function () {
                
            });*/
        }
    });
    });

    function updateStatus(id) {
        console.log(id);
    }
</script>

<div id="tbOrder">

    <input id="ssOrder"></input>
    <div id="mmOrder" style="width:120px">
        <div data-options="name:'orderId',iconCls:'icon-ok'">订单号</div>
        <div data-options="name:'phone',iconCls:'icon-ok'">手机号</div>
        <div data-options="name:'nickname',iconCls:'icon-ok'">用户名</div>
        <div data-options="name:'consignee',iconCls:'icon-ok'">收件人</div>
        <div data-options="name:'status',iconCls:'icon-ok'">状态</div>
    </div>
</div>